<!-- 第四行 -->

<template>
  <FormCheckbox :one="obj" :label="obj.targetName" bind="value" :dict="dict" :hasAll="false" @change="toChange">
    <!-- 标签 -->
    <template #label>
      <span>{{ obj.targetName }}</span>
      <el-tooltip :content="obj.describe" placement="right">
        <span class="inFlexCC">?</span>
      </el-tooltip>
    </template>
  </FormCheckbox>
</template>

<script>
// ============================== 导入依赖 ============================== //

import CORE from '@/CORE'

// ============================== 导出组件 ============================== //

export default {
  /**
   * 名称定义 (实际使用名称)
   */
  name: 'Secure4',

  /**
   * 混入列表 (配置选项合并)
   */
  mixins: [CORE.mixWeb()],

  /**
   * 计算属性 (慎用箭头函数)
   */
  computed: {
    /**
     * 对象
     */
    obj() {
      const matched = this.list.find((item) => item.targetItem === '10001004')
      return matched || {}
    },

    /**
     * 字典
     */
    dict() {
      return [
        ['1', '人证双重核验系统'],
        ['2', '视频安防监控系统'],
        ['3', `入侵${CORE.MAP.ALARM}系统 (或电子围栏)`],
        ['4', '车辆违章管控系统'],
        ['5', '停车场管理系统'],
      ]
    },
  },

  /**
   * 监听属性 (深度 deep 首次 immediate)
   */
  watch: {
    /**
     * 监听列表就绪
     */
    readyList(ready) {
      ready && this.toInit()
    },
  },

  /**
   * 本地方法 (轻量重要在前)
   */
  methods: {
    /**
     * 初始化选项
     */
    toInit() {
      this.obj.value = []
      this.dict.forEach(([id]) => {
        if (this.obj[`var${id}`] === '1') this.obj.value.push(id)
      })
    },

    /**
     * 切换单选
     */
    toChange(values) {
      this.dict.forEach(([id]) => {
        this.obj[`var${id}`] = values.includes(id) ? '1' : undefined
      })
    },
  },
}
</script>
